/<template>
  <div class="goodsList">
    <ul>
      <li v-for="item in list" :key="item.id">
        <Item :item='item'>
            <template v-slot:jia>
              <button @click="item.num++">+</button>
            </template>
        </Item>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import Item from '../../components/Item.vue'
export default {
  data(){
    return{
      list:[]
    }
  },
  components: {
    Item
  },
  mounted() {
    axios.get('/list').then(res=>{
      console.log(res.data);
      this.list=res.data
    })
  },
}
</script>

<style lang='scss'>
.goodsList{
  width: 100%;
  height: 200px;
  overflow-x: scroll;
  ul{
    width: 1500px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    span{
      margin-right: 10px;
      color: orangered;
    }
  }
}
</style>